<script setup lang="ts">

import { onMounted, reactive, Ref, ref, render, watchEffect } from "vue";

import {billiards, uiLayer, uiStatus, UiStatus } from "./model/billiards";

function handleClickGrabBtn() {
  switch (uiStatus.value) {
    case UiStatus.grab: {
      uiStatus.value = UiStatus.wait;
      break;
    }
    case UiStatus.shuttle: {
      uiStatus.value = UiStatus.grab;
      break;
    }
    case UiStatus.wait: {
      uiStatus.value = UiStatus.grab;
      break;
    }
  }
}

onMounted(() => {
  const container = document.getElementById("container");
  if (container != null) {
    billiards.mounted(container);
    uiLayer.mount(container);
    console.dir(billiards);
  }
});
</script>

<template>
  <div id="container">
    <div class="controls">
      <div class="button" @click="handleClickGrabBtn">
        <svg
          class="svg"
          t="1669606357464"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2937"
        >
          <path
            class="path"
            :class="uiStatus === UiStatus.grab ? 'active' : ''"
            d="M815.786667 392.533333l-64.853334-68.266666L600.746667 170.666667c-20.48-23.893333-61.44-23.893333-81.92 0-20.48 20.48-30.72 51.2-6.826667 78.506666l13.653333 13.653334c6.826667 6.826667 6.826667 17.066667 0 23.893333-6.826667 6.826667-17.066667 6.826667-23.893333 0l-13.653333-13.653333-3.413334-3.413334-44.373333-47.786666c-23.893333-23.893333-61.44-23.893333-81.92 0-23.893333 23.893333-23.893333 61.44 0 85.333333l47.786667 54.613333c6.826667 6.826667 6.826667 17.066667 0 23.893334-6.826667 6.826667-17.066667 6.826667-23.893334 0L300.373333 300.373333c-20.48-20.48-61.44-20.48-81.92 0-23.893333 23.893333-23.893333 61.44 0 85.333334l81.92 78.506666c6.826667 6.826667 6.826667 17.066667 0 23.893334s-17.066667 6.826667-23.893333 0l-37.546667-34.133334c-23.893333-23.893333-61.44-23.893333-85.333333 0s-23.893333 61.44 0 85.333334l163.84 167.253333c6.826667 6.826667 6.826667 17.066667 0 23.893333-6.826667 6.826667-17.066667 6.826667-23.893333 0L238.933333 672.426667V716.8c0 85.333333 71.68 153.6 157.013334 153.6h211.626666c51.2 0 102.4-20.48 139.946667-58.026667l75.093333-71.68c40.96-40.96 61.44-102.4 61.44-174.08 3.413333-68.266667-20.48-129.706667-68.266666-174.08z"
          ></path>
        </svg>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#container {
  width: 100vw;
  height: 100vh;
  .controls {
    position: absolute;
    right: 50%;
    top: 20px;
    transform: translateX(-50%);
    z-index: 3;
    .button {
      height: 30px;
      width: 30px;
      margin-left: 20px;
      border: 2px solid #c0c0c0;
      border-radius: 100%;
      cursor: pointer;
      .svg {
        color: red;
        .path {
          fill: #c0c0c0;
          &.active {
            fill: #fff;
          }
        }
      }
    }
  }
  #uiLayer {
    position: absolute;
    // background-color: green;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
